<!doctype html>
<html lang="en" class="fullHeight">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <link rel="stylesheet" type="text/css" href="css/test05.css">
</head>
<body class="fullHeight">
<div class='sidebar fullHeight'>sidebar</div>
<div class="controller">
  <div>
    <button onclick="fadeIn()">淡进</button>
    <button onclick="fadeOut()">淡出</button>
  </div>
  <div>
    <button onclick="fadeInUp()">向上淡进</button>
    <button onclick="fadeOutLeft()">向左淡出</button>
  </div>
</div>
<script src="sidebarEffects.js"></script>
</body>
<script>
  var sidebarEl = document.querySelector(".sidebar");

  function fadeIn (e) {
    sidebarEl.className = 'sidebar fullHeight';
    sidebarEl.style.top = '0px';
    sidebarEl.style.left = '0px';
    sidebarEl.classList.add('move_right');
  }
  function fadeOut (e) {
    sidebarEl.className = 'sidebar fullHeight';
    sidebarEl.style.left = '120px';
    sidebarEl.classList.add('move_left');
  }
  function fadeInUp(e) {
    sidebarEl.className = 'sidebar fullHeight';
    sidebarEl.style.top = '250px';
    sidebarEl.style.left = '120px';
    sidebarEl.classList.add('move_up');

  }
  function fadeOutLeft(e) {
    sidebarEl.className = 'sidebar fullHeight';
    sidebarEl.style.top = '0px';
    sidebarEl.style.left = '120px';
    sidebarEl.classList.add('move_left');

  }
</script>
</html>

